<template>
	<view class="content">
		<!-- 电量显示栏-->
		<view class="top_nav">
			<view class="kong"></view>
			<view class="tab_item">
				<view class="return" @click="returnPage">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/course/jiantou.png"></image>
				</view>
				<view class="title">{{store_name}}</view>
				<view class="return"></view>
			</view>
		</view>
		
		<!-- 商品详情 -->
		<view class="goods_detail">
			<view class="swiper_img">
				<swiper class="swiper" indicator-dots circular autoplay :interval="3000" :duration="1000">
					<swiper-item  v-for="(item,index) in goods_details.images" :key="index">
						<view class="swiper-item">
							<image :src="item" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
				
			</view>
		</view>
		
		<!-- 商品名称内容 -->
		<view class="goods_wrap">
			<view class="goods_name">{{goods_details.title}}</view>
			<view class="goods_price">
				<view class="new_price">{{goods_details.sku_price[0].price}}</view>
				<view class="old_price">参考价:{{goods_details.original_price}}</view>
			</view>
		</view>
		
		<!-- 商品简介 v-html="content(goods_details.content)"-->
		<view class="goods_intradus">
			<view class="industry_title">商品详情</view>
			<view class="goods-detail" v-html="content(goods_details.content)"></view>
		</view>
		
		<!-- 底部购买栏 -->
		<view class="buy_bottom">
			<view class="goods_left">
				<view class="goods_index" @click="bindHome">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/34.png" mode=""></image>
					<view class="">首页</view>
				</view>
				<view class="goods_index" v-if="goods_details.favorite==null"  @click="bindCollect">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/36.png" mode=""></image>
					<view class="">收藏</view>
				</view>
				<view class="goods_index" v-if="goods_details.favorite=='true'" @click="bindCollects">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/scs.png" mode=""></image>
					<view class="">取消收藏</view>
				</view>
				<view class="goods_index" @click="shareWeChat">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/37.png" mode=""></image>
					<view class="">分享</view>
				</view>
			</view>
			<view class="kefu" @click="toKefu">联系商家</view>
			<view class="goods_buy"  @click="buynow(goods_details,2)">
				<view class="buy_box">立即购买</view>
			</view>
		</view>
		<!-- 规格 -->
		<view class="specification" >
			<echone-sku
				:show="popupShow" 
				 mode="forbidden"
				:theme-color="themeColor" 
				:combinations="combinations" 
				:specifications="specifications" 
				:default-select-index="selectedIndex" 
				:combinations-props="combinationsProps"
				:specifications-props="specificationsProps"
				@close="handleClose" 
				@confirm="handleConfirm"
			></echone-sku>
		</view>
	</view>
</template>

<script>
	import echoneSku from '@/components/echone-sku/echone-sku.vue'
	export default {
		components:{echoneSku},
		data() {
			return {
				store_name:'商品详情',
				id:0,
				swiperList:[
					{
						img:'https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/detail/3.png'
					},{
						img:'https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/detail/3.png'
					},{
						img:'https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/detail/3.png'
					},
				],
				type:0,
				goods_details:{},
				
				// 商品规格参数开始
				themeColor: '#e64f31',
				popupShow: false,
				combinationsProps: {
					id: 'id',
					value: 'value',
					image: 'image',
					price: 'price',
					stock: 'stock'
				},
				specificationsProps: {
					id: 'id',
					list: 'skuList',
					name: 'spec_name'
				},
				combinations: [
					// {
					//   id: '1',
					//   value: '成都市锦江区,2020年',
					//   image:
					// 	'https://miniprogram-img01.caishuib.com/wx15168444f005a4ab/material/image/202005135/3a014c2f42c1c46b.PNG',
					//   price: 80.0,
					//   stock: 1000,
					// },
					// {
					//   id: '2',
					//   value: '成都市锦江区,2019年',
					//   image:
					// 	'https://miniprogram-img01.caishuib.com/wx15168444f005a4ab/material/image/20200383/ebd0c8d01a6e9c10.PNG',
					//   price: 100.0,
					//   stock: 500,
					// },
					// {
					//   id: '3',
					//   value: '成都市青羊区,2020年',
					//   image:
					// 	'https://miniprogram-img01.caishuib.com/wx15168444f005a4ab/material/image/202005135/3a014c2f42c1c46b.PNG',
					//   price: 80.0,
					//   stock: 1000,
					// },
					// {
					//   id: '4',
					//   value: '成都市青羊区,2019年',
					//   image:
					// 	'https://miniprogram-img01.caishuib.com/wx15168444f005a4ab/material/image/20200383/ebd0c8d01a6e9c10.PNG',
					//   price: 100.0,
					//   stock: 0,
					// },
				],
				specifications: [
					// {
					//   spec_name: '发证机关',
					//   id: '123',
					//   skuList: ['成都市锦江区', '成都市青羊区'],
					//   // skuList: ['成都市锦江区', '成都市青羊区','成都市武侯区','成都市成华区','成都市金牛区'],
					// },
					// {
					//   spec_name: '教育年度',
					//   id: '456',
					//   skuList: ['2020年', '2019年'],
					// },
				],
				selectedIndex: 0,
				// 商品规格参数结束
				flag:'',
				goods_min_price:0,
				goods_max_price:0,
				user_id:null,
				shop_id:null,
				token:"122c2a3a-e453-4834-a355-992d149bca40",
				collects:true,
				collect_icon:false,
			}
		},
		onLoad(options) {
			this.id=options.id
			this.token=options.token
			this.shop_id=options.shop_id
			
			
			
			this.getDetail()
		},
		methods: {
			content(str){
			      var content = str.replace(/<img/g, '<img style="max-width:100%;height:auto;display:block"').replace(/\\/g, '')
			      return content;
			},
			handleClose() {
				this.popupShow = false
			},
			bindTip(){
				this.Unfold_data.showWindow('敬请期待');
			},
			handleConfirm(obj) {
				console.log(obj)
				this.popupShow = false;
				// if(this.flag==1){
				// 	// 通过规格加入购物车
				// 	var url1 = '/api/manystore/order/add';
				// 	let params = {
				// 		goods_id: this.goods_details.goods_id,
				// 		goods_num:obj.count,
				// 		goods_sku_id:obj.id
				// 	};
				// 	this.Unfold_data.upload_data(params, 'POST', url1, res => {
				// 		if (res.statusCode == 200 && res.data.code == 1) {
				// 			uni.navigateTo({
				// 				// url: '/pages/payOrder/payOrder?id=' + this.id + '&goods_num='+obj.count+'&sku_id='+obj.id
				// 				url:'/pages/cart/cart?cart_type=1'
				// 			})
				// 		} else {
				// 			this.Unfold_data.showWindow(res.data.msg);
				// 		}
				// 	});
				// }else 
				if(this.flag==2){
					//计算总计
					// var sumprice = obj.count*obj.price
					// //通过规格直接购买
					// uni.navigateTo({
					// 	url: '/pages/payOrder/payOrder?id=' + this.id + '&goods_num='+obj.count+'&sku_id='+obj.id
					// });
					// 通过规格加入购物车
					// var url1 = '/api/manystore/order/orderNow';
					// let params = {
					// 	goods_id: this.goods_details.goods_id,
					// 	goods_num:obj.count,
					// 	goods_sku_id:obj.id
					// };
					// this.Unfold_data.upload_data(params, 'POST', url1, res => {
					// 	if (res.statusCode == 200 && res.data.code == 1) {
						let params = {
							goods_id: this.goods_details.sku_price[0].goods_id,
							number:obj.count,
							goods_sku_ids:obj.id,
							user_id:this.user_id 
						};
							sui.navigateTo({
								url: `/pages/payOrder/parOrderThree?&data1=${JSON.stringify(params)}&type=store`
							})
					// 	} else {
							// this.Unfold_data.showWindow(res.data.msg);
						// }
					// });
				}
				
			},
			
	       buynow(goods_details){
			   if(goods_details.sku_price[0].stock<=0){
			   	this.Unfold_data.showWindow('此商品暂无库存');
			   	return
			   }
			   
			   //判断购买的数量与库存比较
			   // if(goods_details.num >= goods_details.quantity){
			   // 	this.Unfold_data.showWindow('此商品库存不足');
			   // 	return
			   // }
			   // 选择商品规格
			   if(goods_details.is_sku == 1){
			   	//如果有规格就打开规格
			   	this.flag = 2
			   	this.popupShow = true
			   }else{
			   	console.log(this.id)
			   	// return
			   	//没有规格直接跳转创建订单页面
			   	// uni.navigateTo({
			   	// 	url: '/pages/payOrder/payOrder?id=' + this.id + '&goods_num=1'
			   	// });
			   	let params = {
			   		goods_id: goods_details.sku_price[0].goods_id,
			   		number:1,
			   		goods_sku_ids:'',
					user_id:this.user_id 
			   	};
			   	sui.navigateTo({
			   		url: `/pages/payOrder/parOrderThree?&data1=${JSON.stringify(params)}&type=store`
			   	})
			   }
		   },
			
			getDetail(){
				uni.showLoading({
					title:'加载中'
				})
				var urls = '/api/usercenter/user';
				let params1 = {
					token:this.token
				};
				this.Unfold_data.upload_datas(params1, 'POST', urls, res => {
					if (res.statusCode == 200 && res.data.code == 1) {
						this.user_id = res.data.data.id;
						let url="/api/goods/goods/detail"
						let params={
							id:this.id,
							user_id:this.user_id
						}
						this.Unfold_data.yh_data(params, 'GET', url, res => {
							if (res.data.code == 1) {
								uni.hideLoading()
								this.goods_details = res.data.data;
								if(res.data.data.is_sku==1){
									var combinations = res.data.data.sku_price
									var specifications = res.data.data.sku
									var name = [];
									this.specifications = []
									specifications.forEach(item=>{
										name = []
										item.content.forEach(item1=>{
											//重新组建规格值数据
											name.push(item1.name)
										})
										if(item.content){
											this.specifications.push({
												//规格键名
												'spec_name':item.name,
												//规格id
												'id':item.goods_id,
												//规格值
												'skuList':name
											})
										}
									})
									this.combinations = []
									combinations.forEach(item=>{
										this.combinations.push({
											'id':item.goods_sku_ids,
											'value':item.goods_sku_text,
											'image':item.image,
											'price':item.price,
											'stock':item.stock,									
										})
										
										
									})
								}
							} else {
								this.Unfold_data.showWindow(res.data.msg);
							}
						});
					} else {
						this.Unfold_data.showWindow(res.data.msg);
					}
				});
			},
			toKefu(){
				let url='/api/chat/Chat/findShopUrl'
				let params={
					shop_id:this.goods_details.shop_id
				}
				this.Unfold_data.log_data(params,'POST',url,res=>{
					  if(res.data.code==1){
						 let item=res.data.data
						 sui.navigateTo({
						 	url:'/pages/center/user_chat/user_chat?shop_id='+item.shop_id+'&shop_name='+item.name+'&avaters='+item.img_url
						 })
					  }else{
						  this.Unfold_data.showWindow(res.data.msg)
					  }
				})
			},
		    bindHome(){
				uni.navigateTo({
					url:'../home/home'
				})
			},
			// 点击收藏
			bindCollect(){
				let url='/api/users/favorite/favorite'
				let params={
					user_id:this.user_id,
					goods_id:this.goods_details.sku_price[0].goods_id
				}
				this.Unfold_data.yh_data(params, 'GET', url, res => {
					if(res.data.code==1){
						this.goods_details.favorite='true'
						this.Unfold_data.showWindow(res.data.msg)
					}else{
						this.Unfold_data.showWindow(res.data.msg)
					}
				})
			},
			bindCollects(){
				let url='/api/users/favorite/del_favorite'
				let params={
					user_id:this.user_id,
					goods_id:this.goods_details.sku_price[0].goods_id
				}
				this.Unfold_data.yh_data(params, 'GET', url, res => {
					if(res.data.code==1){
						this.goods_details.favorite=null
						this.Unfold_data.showWindow(res.data.msg)
					}else{
						this.Unfold_data.showWindow(res.data.msg)
					}
				})
			},
			//跳转上一页
			returnPage(){
			    uni.navigateBack({
			     delta:1
			    })
			},
			shareWeChat(){
				// uni.share({
				// 		provider: "weixin",
				// 		scene: "WXSceneSession",
				// 		type: 0,
				// 		href: "",
				// 		title: this.goods_details.title,
				// 		summary: "",
				// 		imageUrl: this.goods_details.images[0],
				// 	success: function (res) {
				// 		console.log("success:" + JSON.stringify(res));
				// 	},
				// 	fail: function (err) {
				// 		console.log("fail:" + JSON.stringify(err));
				// 	}
			 // });
			 this.Unfold_data.showWindow('敬请期待')
			},
		}
	}
</script>

<style lang="scss">
page{
	width: 100%;
	height: 100%;
	background-color: #f6f6f6;
}
.content{
	width: 100%;
	position: relative;
	.top_nav{
		width: 100%;
		height: 160upx;
		background-image: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_user/new_bjs.png');
		background-size: cover;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.kong{
			width: 100%;
			height: 60upx;
		}
		.tab_item{
			width: 90%;
			margin: 0 auto;
			height: 100upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.return{
				flex: 1;
				width: 100%;
				image{
					width: 29upx;
					height: 29upx;
				}
			}
			.title{
				flex: 8;
				width: 100%;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 10;
			}
		}
	}
	.goods_detail{
		width: 100%;
		padding-top: 160upx;
		.swiper_img{
			width: 100%;
			height: 700upx;
			.swiper{
				width: 100%;
				height: 700upx;
				.swiper-item{
					image{
						width: 100%;
						height: 700upx;
					}
				}
			}
		}
	}
	.goods_wrap{
		width: 100%;
		padding: 20upx;
		background: #FFFFFF;
		.goods_name{
			font-size: 34upx;
			font-weight: bold;
		}
		.goods_price{
			padding-top: 40upx;
			.new_price{
				font-size: 34upx;
				color: #ff0000;
				font-weight: bold;
			}
			.old_price{
				margin-top: 10upx;
				font-size: 24upx;
				color: #7c7c7c;
				text-decoration: line-through;
			}
		}
	}
	.goods_intradus{
		width: 100%;
		padding: 30upx;
		margin-top: 20upx;
		margin: 0 auto 120upx;
		.industry_title{
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.goods-detail{
			width: 100%;
			margin-top: 20upx;
			background-color: #FFFFFF;
		}
		
	}
	.buy_bottom{
		width: 750upx;
		height: 120upx;
		background-color: #fff;
		border-top: 1px solid #7C7C7C;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 20upx;
		.goods_left{
			display: flex;
			justify-content: flex-start;
			align-items: center;
		   .goods_index{
			    width: 88upx;
				text-align: center;
				margin-left: 20upx;
				image{
					width: 46upx;
					height: 46upx;
				}
				view{
					font-size: 22upx;
					color: #000000;
				}
		   }
			.goods_index:nth-child(1){
				margin-left: 0;
			}
		}
		.kefu{
			width: 180upx;
			height: 70upx;
			background-color: #c8241b;
			text-align: center;
			line-height: 70upx;
			font-size: 28upx;
			color: #FFFFFF;
			border-radius: 34upx;
			margin-left: 20upx;
		}
		.goods_buy{
			margin-left: 20upx;
			.buy_box{
				width: 200upx;
				height: 70upx;
				background-color: #c8241b;
				text-align: center;
				line-height: 70upx;
				font-size: 28upx;
				color: #FFFFFF;
				border-radius: 34upx;
			}
		}
	}
}
</style>
